<template>
    <div class="ele-pic-dialog" v-if="source">
        <!-- 预览图 -->
        <div class="el-upload-list " :class="[{'el-upload-list--picture-card': type === 'image' || type === 'image-auto', 'el-upload-list--text': type === 'file'}]">
            <ul>
                <li :key="index"
                     class="el-upload-list__item"
                     v-for="(source, index) of computedSources" v-if="type === 'image' || type === 'image-auto'"
                >
                    <slot v-bind="{source: source, index: index}">
                        <el-image
                                :lazy="lazy"
                                :src="source.thumb"
                                :style="computedStyle"
                                fit="contain"
                        />
                    </slot>
                    <span class="el-upload-list__item-actions">
                        <span @click="handlePreview(index, source)">
                            <i :class="viewClass"></i>
                    </span>
                   <span
                           @click="handleRemove(index)"
                           v-if="removeFn"
                   >
            <i class="el-icon-delete"></i>
          </span>
          <slot
                  name="action"
                  v-bind="{source: source, index: index}"
          />
        </span>
                </li>
                <li :key="index"
                    class="el-upload-list__item is-success"
                    v-for="(source, index) of computedSources"
                    v-if="type === 'file'" style="margin-top: 0" :style="{width: type === 'file' ? '200px' : '400px'}">
                    <slot v-bind="{source: source, index: index}">
                     <a v-if="isVideo"><i class="el-icon-document"></i>{{title}}</a>
                     <a v-else class="el-upload-list__item-name" :href="baserUrl + source.thumb" style="color: #409EFF"><i class="el-icon-document"></i>{{title}}</a>
                      <label class="el-upload-list__item-status-label" v-if="isVideo">
                        <i class="el-icon-delete" @click="handleRemove(index)"></i>
                      </label>
                      <label class="el-upload-list__item-status-label" v-else>
                        <i class="el-icon-upload-success el-icon-circle-check"></i>
                      </label>
                      <i class="el-icon-close" @click="handleRemove(index)" v-if="removeFn"></i>
                      <i class="el-icon-close-tip">按 delete 键可删除</i>
                    </slot>
                </li>
            </ul>
        </div>
        <upload-dialog
                :carouselAttrs="carouselAttrs"
                :sliceSingle="sliceSingle"
                :sources="computedSources"
                :title="title"
                :type="type"
                ref="dialog"
        />
    </div>
</template>

<script>
import uploadDialog from './picDialog';
export default {
    name: 'singlePic',
    components: {
        uploadDialog
    },
    props: {
        type: {
            type: String,
            default: 'image',
            validator (value) {
                return ['image', 'file', 'image-auto'].includes(value);
            }
        },
        // 缩略图大小, 宽 === 高时, 简略写法
        size: Number,
        // 缩略图宽度, 当给定width时, 会覆盖size的值
        width: Number,
        // 缩略图高度, 当给定height时, 会覆盖size值
        height: Number,
        // 缩略图是否懒加载
        lazy: {
            type: Boolean,
            default: false
        },
        isVideo: {
            type: Boolean,
            default: false
        },
        // 源
        source: [String, Array, Object],
        // 缩略图后缀
        // 当type为image时, 且未指定thumb, 可通过thumbSuffix设置缩略图
        thumbSuffix: String,
        // 缩略图样式
        thumbStyle: Object,
        // 轮播图属性
        carouselAttrs: Object,
        // 删除函数
        removeFn: Function,
        // 统一的弹框标题
        title: String,
        // 强制多张图片按照单张显示
        sliceSingle: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            baserUrl: process.env.VUE_APP_BASE_API + '/download-file' + '?fileName='
        };
    },
    computed: {
        viewClass () {
            if (this.type === 'video' || this.type === 'iframe') {
                return 'el-icon-video-play';
            } else {
                return 'el-icon-zoom-in';
            }
        },
        computedStyle () {
            let width = this.width || this.size;
            let height = this.height || this.size;
            if (this.type === 'image') {
                width = width ? width + 'px' : '150px';
                height = height ? height + 'px' : '150px';
            } else if (this.type === 'image-auto') {
                width = width ? width + 'px' : '150px';
                height = height ? height + 'px' : 'auto';
            } else if (this.type === 'iframe') {
                width = width ? width + 'px' : '360px';
                height = height ? height + 'px' : 'auto';
            }
            return Object.assign({}, {width, height, display: 'block'}, this.thumbStyle);
        },
        // 缩略图
        thumbs () {
            return this.computedSources.map((item) => {
                return item.thumb;
            });
        },
        computedSources () {
            const sources = this.source;
            if (typeof sources === 'string') {
                // 传入参数为 string
                return [this.getStringSource(sources)];
            } else if (sources instanceof Array) {
                // 传入参数为 array, 数据里面既可以有string 又可以有 object
                const res = [];
                sources.forEach((item) => {
                    if (item instanceof Object) {
                        res.push(this.getObjectSource(item));
                    } else if (typeof item === 'string') {
                        res.push(this.getStringSource(item));
                    } else {
                        console.warn('数组元素错误', sources, item);
                    }
                });
                return res;
            } else if (sources instanceof Object) {
                // 传入参数为 object
                return [this.getObjectSource(sources)];
            } else {
                return [];
            }
        }
    },
    methods: {
        // 点击查看
        handlePreview (index) {
            this.$refs.dialog.startPreview(index);
        },
        handleRemove (index) {
            this.removeFn(index);
        },
        // 获取字符串形式来源
        getStringSource (src) {
            let thumb = src;
            if (this.type === 'image' && this.thumbSuffix) {
                thumb += this.thumbSuffix;
            }
            return {
                type: this.type,
                src: src,
                thumb: thumb
            };
        },
        // 获取对象形式来源
        getObjectSource (source) {
            source.type = source.thumb ? 'image' : this.type;
            source.thumb = source.thumb || source.src;
            return source;
        }
    }
};
</script>

<style>
    .el-upload-list.el-upload-list--picture-card .el-upload-list__item {
        width: auto;
        height: auto;
        margin: 0 8px 0 0;
        border: 0;
    }
    .ele-gallery-image {
        width: 100%;
        max-width: 700px;
    }
    .ele-gallery-iframe.embed-responsive {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;
    }
    .ele-gallery-iframe.embed-responsive .embed-responsive-item,
    .ele-gallery-iframe.embed-responsive iframe,
    .ele-gallery-iframe.embed-responsive embed,
    .ele-gallery-iframe.embed-responsive object,
    .ele-gallery-iframe.embed-responsive video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    .ele-gallery-iframe.embed-responsive-16by9 {
        padding-bottom: 56.25%;
    }
    .ele-gallery-iframe.embed-responsive-4by3 {
        padding-bottom: 75%;
    }
    .el-upload-list ul{
        padding: 0;
        margin-top: 10px;
        margin-bottom: 0;
    }
    .el-upload-list li{
        list-style: none;
    }
</style>
